.sport {
    height: 100%;
    background: rgba(21, 146, 204, 100);

    .outdoor-run {
        color: #fff;
        opacity: .7;
        font-size: 14px;
    }

    .sporting {
        margin-top: 10px;
        justify-content: space-between;

        .symbol {
            .icon-shezhi {
                margin-left: 20px;
            }
        }

        span {
            font-size: 24px;
            color: #fff;
        }
    }

    .kilometers {
        margin: 30px 0;
        justify-content: center;
        color: #fff;

        .number {
            font-size: 100px;
        }

        .text {
            font-size: 20px;
            padding-top: 75px;
        }
    }

    .location {
        justify-content: space-between;
        line-height: 30px;
        margin: 30px 0;

        .text {
            color: #fff;
            opacity: .7;
            font-size: 14px;
        }

        .line {
            color: #fff;
            padding: 0 20px;
        }

        .icon-location {
            color: #fff;
            font-size: 30px;
            cursor: pointer;
        }
    }

    .font {
        justify-content: space-between;
        padding: 0 20px;

        div {
            flex-direction: column;

            span {
                font-size: 30px;
                color: #fff;
            }
        }

        .text {
            color: #fff;
            opacity: .7;
            font-size: 14px;
            display: inline-block;
        }
    }

    .time {
        padding: 20px 0;
        color: #fff;
        font-size: 30px;
        justify-content: space-between;
    }

    .bottom {
        text-align: center;
        position: relative;

        .btn {
            border-radius: 50px;
            width: 100px;
            height: 100px;
            display: inline;
            flex-direction: column;
            position: absolute;
            left: 35%;
            i {
                font-size: 50px;
                color: #1592cc;
                position: absolute;
                left: 25%;
                top: 10px;
            }
            span {
                position: absolute;
                top: 60%;
                left: 35%;
                color: #59b2db;
            }
        }

        .left,
        .right {
            display: inline-block;
            width: 100px;
            height: 100px;
            font-size: 30px;
            border-radius: 50%;
            color: #fff;
            display: none;
            .icon-initiate,
            .icon-end {
                flex-direction: column;
                align-items: center;
            }
        }

        .left {
            background-color: #79f0c2;
            position: absolute;
            left: 20px;
            top: 0;
            i{
                margin-top: 10px;
                font-size: 30px;
            }
            span{
                font-size: 18px;
            }
        }

        .right {
            background-color: #ff6060;
            position: absolute;
            right: 20px;
            top: 0;
            i{
                margin-top: 10px;
                font-size: 30px;
            }
            span{
                font-size: 18px;
            }
        }
    }

    .icon-lock {
        font-size: 50px;
        color: #fff;
        position: fixed;
        right: 20px;
    }

}